<template>
    <div class="checkbar-wrap">
      <scrollList ref="checkbarList" :scrollX="true" :loadMore="false" :bounce="false">
        <div slot="defaultScroll">
          <div v-for="(item, index) in navlist.concat(tagArr)"
               :key="`cmdNav${index}`"
               @click.prevent.stop="checkCmdNav(item.id, index)"
               :class="`checkbar-item ${isActive(index)}`"
          >{{item.name}}{{item.num ? `(${item.num})` : ''}}</div>
        </div>
      </scrollList>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  export default {
    name: 'checkbar',
    data () {
      return {
        activeIndex: 0,
        navlist: [
          {
            name: '全部',
            id: ''
          }
        ]
      };
    },
    props: {
      tagArr: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      isActive () {
       return (index) => {
         return index === this.activeIndex ? 'active' : '';
        }
      }
    },
    mounted () {
      this.tagArr && this.navlist.concat(this.tagArr);
      this.$nextTick(() => {
        this.$refs.checkbarList && this.$refs.checkbarList._initComponent();
      });
    },
    methods: {
      checkCmdNav (id, index) {
        this.activeIndex = index;
        this.$emit('showType', id);
      }
    },
    components: {
      scrollList
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
@import '~@/assets/css/mixin.styl';
  .checkbar-wrap
    position relative
    font-size rpx(24)
    padding rpx(20) rpx(15)
    height rpx(50)
    box-sizing content-box
    border-1px(#eeeeee, 0, solid)
    .scrollwrap
      top rpx(20)
      bottom rpx(20)
      left rpx(15)
      width rpx(720)
      &>div
        display inline-block
        white-space nowrap
        .checkbar-item
          display inline-block
          min-width rpx(120)
          height rpx(50)
          line-height rpx(50)
          border-radius rpx(50)
          text-align center
          background-color #fff5ed
          padding 0 rpx(20)
          margin 0 rpx(9)
          &.active
            background-color #fd8a55
            color #fff
</style>
